<template>
    <div class="introduction_box">
        <div class="introduction_header">
        <router-link tag="i" to="/index/first" class=" ">
            <i class="el-icon-arrow-left"></i>
        </router-link>
            <span>功能介绍</span>   
        </div>     
<router-link tag="div" to="/introduction/beginner" class=" ">
<div class="introduction_content">
            <!-- @/assets/yjpic/service.png -->
        <div class="content_on">
        <img src="@/assets/yjpic/ic_novice.png" alt="">
        <div class="content_in">
        <span>新手引导</span>
        <p>刷新你的智能体验</p>
        </div>
        </div>
        <i class="el-icon-arrow-right"></i> 
        </div>
        </router-link>
        <router-link tag="div" to="/introduction/faq" class=" ">
        <div class="introduction_content">
            <!-- @/assets/yjpic/service.png -->
        <div class="content_on">
        <img src="@/assets/yjpic/ic_problem.png" alt="">
        <div class="content_in">
        <span>常见问题</span>
        <p>哎，原来是这样啊</p>
        </div>
        </div>
        <i class="el-icon-arrow-right"></i>
        </div>
        </router-link>
        <router-link tag="div" to="/introduction/instructions" class=" ">
        <div class="introduction_content">
            <!-- @/assets/yjpic/service.png -->
        <div class="content_on">
        <img src="@/assets/yjpic/ic_instructions.png" alt="">
        <div class="content_in">
        <span>使用说明</span>
        <p>最科学的使用说明</p>
        </div>
        </div>
        <i class="el-icon-arrow-right"></i>
        </div>
        </router-link>
        <router-link tag="div" to="/introduction/quicktour" class=" ">
        <div class="introduction_content">
            <!-- @/assets/yjpic/service.png -->
        <div class="content_on">
        <img src="@/assets/yjpic/ic_quicktour.png" alt="">
        <div class="content_in">
        <span>快速指南</span>
        <p>上手不用愁</p>
        </div>
        </div>
        <i class="el-icon-arrow-right"></i>
        </div>
        </router-link>
    </div>
</template>
<script>
export default {
    
  }
</script>
<style lang="less" scoped>
*{
    margin: 0;
    padding: 0;
}
.introduction_box{
    background-color: #ffffff;
    height: 100vh;
.introduction_header{
    background-color: #ffffff;
    display: flex;
    padding: 25px;
    align-items: center;
    i{
        font-size: xx-large;
    }
    span{
        font-size: 40px;
        display: block;
        width: 100%;
        text-align: center;
    }
}
.introduction_content{
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #ffffff;
    align-items: center;
    color: rgb(24, 23, 23);
    border-bottom: 2px solid rgba(207, 202, 197, 0.959);
    .content_on{
        display: flex;
        align-items: center;
    }
    .content_in{
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
    span{
        font-size:40px;
    }
    p{
        color: rgb(156, 154, 154);
    }
    i{
        font-size: xx-large;
        color:  rgb(156, 154, 154);
    }
    img{
        width: 1.2rem;
        height: 1.2rem;
        margin-right: 25px;
        margin-left: 10px;
    }
}
}
</style>